<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-07 15:35:09
-->
<template>
  <div  ref="right1_container" style="height: 85%">
   
  </div>
</template>

<script>
import { Gauge } from '@antv/g2plot';
export default {
   mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
  const gauge = new Gauge(this.$refs.right1_container, {
  percent: 0.75,
  range: {
    ticks: [0, 1 / 3, 2 / 3, 1],
    color: ['#F4664A', '#FAAD14', '#30BF78'],
  },
  indicator: {
    pointer: {
      style: {
        stroke: '#D0D0D0',
      },
    },
    pin: {
      style: {
        stroke: '#D0D0D0',
      },
    },
  },
  statistic: {
    content: {
      style: {
        fontSize: '36px',
        lineHeight: '36px',
      },
    },
  },
});

gauge.render();
},
},
};

</script>